<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <title>详情页</title>

    <style type="text/css">
        body,
        html {
            overflow-x: hidden;
        }

        header {
            color: #FFFFFF;
            background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #0F9BEB, #1569C8);
            background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
            /* 标准的语法*/
            box-shadow: 0 0px 7px #0c5ebb;
        }

        .aui-bar-nav {
            top: 0;
            line-height: 2.25rem;
            background-color: #03a9f4;
            color: #ffffff;
            padding: 15px 0 2px 0;
        }

        .aui-bar-nav .aui-pull-right {
            padding: 0 0rem;
            margin: 0 -5px 0 0px;
        }

        .aui-pull-right img {
            max-width: 48%;
            display: block;
        }

        .huilv-li {
            padding-left: 0 !important;
        }

        .huilv-inner {
            padding-right: 0 !important;
            padding-bottom: 0 !important;
        }

        .huilv-content {
            padding: 10px 0px 5px 0;
        }

        .huilv-row {
            margin: 15px 0 1px 0;
            border-bottom: 1px solid #e6e6e6;
            border-top: 1px solid #e6e6e6;
            /*padding: 10px 0;*/
        }

        .huilv-title {
            font-weight: bold;
            font-size: 27px;
            color: #1569c8;
        }

        .huilv-unit {
            font-size: 12px;
            margin-left: 4px;
            color: #000000;
        }

        .btc-p {
            color: #000000;
            font-weight: bold;
            font-size: 12px;
        }

        p.yingkui-p,
        p.bili-p {
            color: #000000;
            font-size: 0.6rem;
            margin: 0.5rem auto;
        }

        .huilv-yingkui-block {
            border-right: 1px solid #E6E6E6;
        }

        .huilv-yingkui-block,
        .huilv-bili-block {
            /*padding-right: 0 !important;
                padding-left: 0 !important;*/
            padding: 0.5rem 0 !important;
        }

        .yingkui-hl,
        .yingkui-zf,
        .bili-hl,
        .bili-zf {
            text-align: initial;
            font-size: 14px;
            color: red;
        }

        .list-xinxi {
            margin-bottom: 0 !important;
        }

        .aui-content.aui-margin-b-15 {
            margin-bottom: 0 !important;
        }

        .more-p {
            height: 2.25rem;
            font-size: 0.7rem;
            padding-left: 15px;
            color: #999999;
            line-height: 45px;
        }

        .aui-list-item-right {
            color: #000000 !important;
        }

        .more-ul li > div,
        .jys-ul li > div {
            border-bottom: 1px solid #E6E6E6 !important;
        }

        .jys-list-header {
            font-size: 0.7rem !important;
            color: #999999 !important;
            padding-left: 0.75rem;
            margin-right: 0.75rem;
        }

        .jys-zxj {
            font-size: 0.8rem !important;
            color: #999999 !important;
        }

        .cjl-spans-content span {
            font-size: 0.6rem !important;
            color: #999999 !important;
        }

        .aui-list .aui-list-item-inner {
            position: relative;
            min-height: 2.3rem;
            padding-right: 0rem !important;
            margin-right: 0.75rem;
        }

        .aui-list .aui-list-item-right,
        .aui-list-item-title-row em {
            max-width: 50%;
            text-align: -webkit-right;
        }

        .jys-zhangfu {
            color: #e61303;
        }

        .aui-grid .aui-iconfont {
            position: relative;
            z-index: 20;
            top: -0.3rem;
            height: 1.4rem;
        }
        .aui-sharebox .aui-row {
             padding: 0 !important;
        }

        p.share_title {
            padding-bottom: 0.85rem;
            line-height: 0.7rem;
            color: #000;
        }

        .aui-col-xs-3.aui-sharebox-btn {
            /*margin: 0.5rem 0 0px 0;*/
            padding: 0 !important;
        }

        .text {
            font-size: 0.7rem;
        }
        .aui-list-item-title.aui-text-info {
            font-size: 0.7rem;
        }

        .aui-list .aui-list-item {
            background-image: none !important;
        }

        .aui-icon-down:before {
            content: none !important;
        }
        span.aui-iconfont.aui-icon-down {
            width: 0.6rem;
            height: 0.6rem;
            border-bottom: 0.15rem solid #1569c8;
            border-right: 0.15rem solid #1569c8;
            border-top: 0.15rem solid #FFF;
            border-left: 0.15rem solid #fff;
            transform: rotate(45deg);
        }
        .aui-sharebox.aui-grid {
            border-top: 0.05rem solid #1569c8;
        }
        p.arr_down {
            line-height: 0.7rem;
            margin-bottom: 0.75rem !important;
        }
        .aui-sharebox img {
            display: block;
            width: 3.2rem !important;
            margin: 0 auto;
        }
        .aui-sharebox-close-btn {
            width: 100%;
            height: 2.4rem;
            line-height: 2.4rem;
            color: #757575;
            text-align: center;
            font-size: 0.8rem;
            color: #1569c8;
        }

        .aui-sharebox-close-btn.aui-border-t.cancel {
            margin-top: 1.6rem;
            border-top: 0.1rem solid #eee!important;
            background-image: none !important;
        }
        .aui-grid .aui-grid-label {
            display: block;
            font-size: 0.7rem;
            position: relative;
            margin-top: 0.6rem !important;
        }
    </style>

</head>

<body>
<header class="aui-bar aui-bar-nav">
    <div class="aui-pull-left aui-btn" onclick="backBefore()">
        <span class="aui-iconfont aui-icon-left"></span>
    </div>
    <div class="aui-title" id="toptext"></div>
    <a class="aui-pull-right aui-btn btn-colect" onclick="openSharebox()">
        <img src="../../image/btn/nav_share@2x.png"/>
    </a>
    <div class="aui-pull-right aui-btn btn-share" id="sc-img-btn">
        <img src="../../image/btn/nav_sz_0@2x.png" id="sc-img"/>
    </div>

    <!--<div class="aui-info-item sc-item"><img src="../../image/btn/nav_sz_1@2x.png" /></div>-->
</header>

<section class="aui-content user-info aui-margin-b-15 list-xinxi">
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-media-list">
            <li class="aui-list-item huilv-li">
                <div class="aui-list-item-inner aui-text-center huilv-inner">
                    <div class="aui-list-item-title aui-text-center huilv-content"><span
                            class="huilv-title"></span><span class="huilv-unit"></span></div>
                    <p class="btc-p" id="btCoin"></p>
                    <div class="aui-row aui-row-padded huilv-row" id="yk">
                        <div class="aui-col-xs-6 huilv-yingkui-block">
                            <div class="aui-col-xs-4">
                                <p class="yingkui-p">盈亏</p>
                            </div>

                            <div class="aui-col-xs-8" id="yingkui">
                                <p class="yingkui-hl"></p>
                                <p class="yingkui-zf"></p>
                            </div>
                        </div>
                        <div class="aui-col-xs-6 huilv-bili-block">
                            <div class="aui-col-xs-4">
                                <p class="bili-p">比例</p>
                            </div>

                            <div class="aui-col-xs-8" id="bili">
                                <p class="bili-hl"></p>
                                <p class="bili-zf"></p>
                            </div>
                        </div>

                    </div>
                </div>
            </li>

        </ul>
    </div>

</section>
<p class=" more-p"> 更多信息</p>
<section class="aui-content">
    <ul class="aui-list more-ul">

        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">币种</div>
                <div class="aui-list-item-right text" id="btName"></div>
            </div>
        </li>
        <li class="aui-list-item" id="jys">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">交易所</div>
                <div class="aui-list-item-right text" id="exchangeName"></div>
            </div>
        </li>
        <li class="aui-list-item" id="mhigh">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">最高</div>
                <div class="aui-list-item-right text" id="high"></div>
            </div>
        </li>
        <li class="aui-list-item" id="mlow">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">最低</div>
                <div class="aui-list-item-right text" id="low"></div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">成交量(24H)</div>
                <div class="aui-list-item-right text" id="volume"></div>
            </div>
        </li>
        <li class="aui-list-item" id="mmarketValue">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">市值</div>
                <div class="aui-list-item-right text" id="marketValue"></div>
            </div>
        </li>
        <li class="aui-list-item" id="msupply">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">流通量</div>
                <div class="aui-list-item-right text" id="supply"></div>
            </div>
        </li>
    </ul>

    <div class="aui-list jys-list-header" style="background-color: initial;" id="messageul1">
        <div class="aui-list-item-inner">
            <div class="aui-list-item-title aui-text-info">交易所</div>
            <div class="aui-list-item-right jys-zxj">最新价</div>
        </div>
    </div>

    <!--第二列表 Start-->
    <ul class="aui-list jys-ul" id="messageul">

    </ul>
</section>

</body>
<script src="../../script/api.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../script/aui-sharebox.js"></script>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var dataList = JSON.parse(localStorage.getItem("dataList"));
  var dataListindex = localStorage.getItem("dataListindex");

  console.log(localStorage.getItem("dataList"))

  var headers = {}

  apiready = function () {
    api.parseTapmode();
    headers = {
      "appVersion": "1.0.0",
      "os": api.systemType,
      "osVersion": api.systemVersion
    }
  }
  var sharebox = new auiSharebox();


  function openShare() {
    share({
      text: "分享kktoken微信交流群",
      type: "text"
    })
  }

  function openSharebox() {
    sharebox.init({

      frameBounces: true, //当前页面是否弹动，（主要针对安卓端）
      shareTitle: " <p class='arr_down'><span class='aui-iconfont aui-icon-down'></span></p><p class='share_title'><span style='color:#1569c8'>kktoken</span>微信交流群分享至:</p>",
      buttons: [{
        image: '../../image/setting_share_pyq@2x.png',
        text: '朋友圈',
        value: 'wx-circle',
        url: 'https://www.baidu.com/'

      }, {
        image: '../../image/setting_share_wxhy@2x.png',
        text: '微信',
        value: 'wx', //可选
        url: 'https://www.baidu.com/'
      }, {
        image: '../../image/setting_share_qqkj@2x.png',
        text: 'QQ空间',
        value: 'qq-qzone'
      }, {
        image: '../../image/setting_share_xlwb@2x.png',
        text: '新浪微博',
        value: 'weibo'
      }],
      col: 4,
      cancelTitle: '取&emsp;消' //可选,当然也可以采用下面的方式使用图标
      //             cancelTitle:'<i class="aui-iconfont aui-icon-close aui-font-size-16"></i>'//可选
    }, function (ret) {
      if (ret) {
        console.log(ret.buttonValue)
        console.log(ret.buttonIndex)
      }
    })
  }

  //  收藏功能区块
  var scImg = document.getElementById("sc-img");
  var scImgBtn = document.getElementById("sc-img-btn");

  console.log(JSON.stringify(dataList[dataListindex]))
  if (!(dataList[dataListindex])["exchangeId"]) {
    scImgBtn.innerHTML = ""
  } else {

    scImg.clk = 0;
    scImg.srcArr = ["../../image/btn/nav_sz_0@2x.png", "../../image/btn/nav_sz_1@2x.png"]
    scImg.bool = true;

    var likeList = JSON.parse(localStorage.getItem("likeLists"))

    if (!likeList)
      likeList = []
    for (let i of likeList) {
      console.log(i.nickName + "====" + (dataList[dataListindex])["nickName"] + "+++++" + i.exchangeId + "====" + (dataList[dataListindex])["exchangeId"])
      if (i.nickName == (dataList[dataListindex])["nickName"] && i.exchangeId == (dataList[dataListindex])["exchangeId"]) {
        scImg.clk = 1
        scImg.src = scImg.srcArr[scImg.clk]
      }
    }
    scImg.onclick = function () {
      this.clk = this.clk ? 0 : 1;
      if (this.clk == 1) {
        likeList.push({
          nickName: (dataList[dataListindex])["nickName"],
          exchangeId: (dataList[dataListindex])["exchangeId"]
        })
      } else {
        for (let i = 0; i < likeList.length; i++) {
          if (likeList[i].nickName == (dataList[dataListindex])["nickName"] && likeList[i].exchangeId == (dataList[dataListindex])["exchangeId"]) {
            likeList.splice(i, 1)
          }
        }
      }
      this.src = this.srcArr[this.clk];
      var b = $(this).is(":checked");
      localStorage.setItem('checkbox', b);
      localStorage.setItem("likeLists", JSON.stringify(likeList));
    }
    $(function () {
      if (localStorage.checkbox == "true") {
        $("#cb").prop("checked", "checked");
      }
    });

  }

  addBox(dataList[dataListindex]);

  //添加数据
  function addBox(result) {

    console.log(JSON.stringify(result) + "++++++")

    $('#toptext').html('<span>' + result["symbol"] + (result["exchangeId"] ? ("," + getjysName(result["exchangeId"])) : "") + '</span>');

    $('.huilv-title').html('<span>' + "￥" + result["priceCNY"] + '</span>');

    $('#detailspan').html('<span class="huilv-title" onclick="toDetail()">' + '<b>￥</b>' + getjysName(result["exchangeId"]) + '</span>');

    if (result["balanceType"]) {
      $('#btCoin').html('<span>' + "=" + result["price"] + getbalanceType(result["balanceType"]) + '</span>');
    } else {
      $('#btCoin').html('')
    }

    if (result["changeCnyPrice"]) {
      $('#yingkui').html('<p class="yingkui-hl">' + '￥' + result["changeCnyPrice"].replace(/-/, "") + '</p>' + '<p class="yingkui-zf">' + result["roseCny"] + "%" + '(当日)</p>');
      $('#bili').html('<p class="bili-hl">' + result["changePrice"] + '</p>' + '<p class="bili-zf">' + result["rose"] + "%" + '(当日)</p>');

      $('.yingkui-hl').css('color', result["changeCnyPrice"] == 0 ? '#000' : result["changeCnyPrice"] > 0 ? getRiseColor() : getFallColor());
      $('.yingkui-zf').css('color', result["roseCny"] == 0 ? '#000' : result["roseCny"] > 0 ? getRiseColor() : getFallColor());
      $('.bili-hl').css('color', result["changePrice"] == 0 ? '#000' : result["changePrice"] > 0 ? getRiseColor() : getFallColor());
      $('.bili-zf').css('color', result["rose"] == 0 ? '#000' : result["rose"] > 0 ? getRiseColor() : getFallColor());
    } else {
      $('#yk').html('')
    }

    //更多信息
    if (result["nickName"]) {
      $('#btName').html('<span">' + result["nickName"] + "(" + result["symbol"] + ")" + '</span>');
    } else {
      $('#btName').html('<span">' + result["name"] + "(" + result["symbol"] + ")" + '</span>');
    }

    $("#high").html('<span>' + "￥" + (result["highCNY"] ? result["highCNY"] : 0) + '</span>');
    $("#low").html('<span>' + "￥" + (result["lowCNY"] ? result["lowCNY"] : 0) + '<span>');
    if (result["exchangeId"]) {
      $('#exchangeName').html('<span>' + getjysName(result["exchangeId"]) + '</span>');
    } else {
      $("#jys").css("display", "none")
    }
    $("#volume").html('<span>' + result["volume"] + '</span>');

    if (result["marketValue"] && result["marketValue"] != 0) {
      $("#marketValue").html('<span>' + "$" + result["marketValue"] + '</span>');
      $("#supply").html('<span>' + result["supply"] + result["symbol"] + '<span>');
    } else {
      $("#mmarketValue").css("display", "none")
      $("#msupply").css("display", "none")
    }
  }

  $(function () {
    ajax_fordata(dataList[dataListindex]);
  });

  function ajax_fordata(result) {
    var coinArray = [{
      'symbol': result["symbol"],
      'exchangeId': result["exchangeId"] || 0
    }]

    var si = setInterval(function () {
      if (JSON.stringify(window.parent.headers) != {}) {
        clearInterval(si)
        $.ajax({
          url: orginlink + '/coin/findExchangeInfo',
          type: 'GET',
          data: {
            coinArray: JSON.stringify(coinArray)
          },
          headers: headers,
          contentType: "application/json",
          dataType: 'json',
          success: function (result1) {
            addBox2(result1);
            localStorage.setItem('exchangeId', JSON.stringify(result1.result));

            console.log(JSON.stringify(result1))
            if (!result["exchangeId"] && result1.result[0]) {
              $("#high").html('<span>' + "￥" + (result1.result[0])["highCNY"] + '</span>');
              $("#low").html('<span>' + "￥" + (result1.result[0])["lowCNY"] + '<span>');
            }

            if (!result1.result[0]) {
              $("#messageul1").css("display", "none")
            }
          }
        });
      }
    }, 100)
  }

  function addBox2(result1) {
    $.each(result1.result, function (index, obj) {
      var jysNameLis = obj['exchangeId'];
      var volumeLis = obj['volume'];
      var newPrcLis = obj['priceCNY'];
      var newPerLis = obj['roseCny'];
      var x;

      //判断只要3条，大于时终止
      if (index <= 2) {
        x = getjysName(jysNameLis)

        //		引用数位方法处理小数
        newPerLis = changeTwoDecimal_f2(newPerLis);
        //数值前添加符号表示涨+跌-
        if (newPerLis > 0) {
          newPerLis = '+' + newPerLis;
        }

        $("#messageul").append('<li class="aui-list-item">' +
          '<div class="aui-list-item-inner">' +
          '<div class="aui-list-item-title aui-text-info"><div style="color: initial;">' + x + '</div><div class="cjl-spans-content"><span>成交量：' + '</span><span>' + volumeLis + '</span></div>' +
          '</div>' +
          '<div class="aui-list-item-right" id="jysPricediv"><div class="jys-huilv">' + newPrcLis + '</div><div class="jys-zhangfu">' + newPerLis + '%</div></div></div></li>');

        var mindex = 0;
        if (newPerLis > 0) {
          $('.jys-zhangfu:eq(' + (index + mindex) + ')').css('color', getRiseColor());
        } else if (newPerLis < 0) {
          $('.jys-zhangfu:eq(' + (index + mindex) + ')').css('color', getFallColor());
        } else {
          $('.jys-zhangfu:eq(' + (index + mindex) + ')').css('color', '#000000');
        }
      }
    })

  }

  function getbalanceType(balanceType) {
    switch (parseInt(balanceType)) {
      case 1:
        return "BTC"
      case 2:
        return "ETH"
      case 3:
        return "USDT"
      case 4:
        return "EUR"
      case 5:
        return "JPY"
      case 6:
        return "USD"
    }
  }
</script>

</html>
